$(function() {	
	//  swiper
	var mySwiper = new Swiper('.swiper-container', {
		direction: 'horizontal', // 垂直切换选项
		loop: true, // 循环模式选项
	
		// 如果需要分页器
		pagination: {
			el: '.swiper-pagination',
		},
	
		// 如果需要前进后退按钮
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	
		// 如果需要滚动条
		// scrollbar: {
		// 	el: '.swiper-scrollbar',
		// },
	})
	
	
	function ajaxBrickList(url,selector){
		
		//处理brick数组的每个一个项目，根据项目生产html代码
		function handleBrick(obj) {
			html =`<li class="item">
						<div class="figure-img">
							<a href=${obj.url} target="_blank">
								<img src=${obj.thumbnail}  alt=${obj.title}>
							</a>
						</div>
						<h3><a href="" class='title'>${obj.title}</a></h3>
						<p class="desc">${obj.desc}</p>
						<p class="price"><span>${obj.price}</span>元</p>
					</li>`
			return html
		};	
		//处理promoList数据
		function handlePromo(obj){
			var html = `<li class='promo-item'><a href=${obj.url}><img src=${obj.thumbnail} alt=${obj.title}></a></li>`;
			return html
		};
		function eachHandle(arryData,handle){
			var html= [];
			arryData.forEach(function(item) {
				html.push(handle(item))
			});
			return `<ul>${html.join('')}</ul>`;
		};
		function eachHandleType(obj,handle){
			var html = [];
			for(k in obj){
				html.push(eachHandle(obj[k],handle))
			};
			return html.join('')
		};
		$.get(url,function(data){
			var brickListHtml = eachHandleType(data['brick-list'],handleBrick);		
			var promoListHtml = eachHandle(data['promo-list'],handlePromo);
			$(selector).find('.promo-list').html(promoListHtml);
			$(selector).find('.brick-list').html(brickListHtml);
			initActive();
		})
	};
	ajaxBrickList("json/mi_phones.json",'#phone');
	ajaxBrickList("json/mi_homeele.json",'#homeelec');
	

	$('.tab-list li').mouseenter(function(event){
		$(this).addClass('tab-active').siblings().removeClass('tab-active')
		var type = {'热门':0,'电视影音':1,'电脑':2,'家居':3};
		var index = type[event.target.innerText];
		var activeUl = $(this).parent().parent().parent().find('.brick-list ul').eq(index);
		activeUl.addClass('tab-content-active').siblings().removeClass('tab-content-active')
	});
	
	function initActive(){
		$('.tab-list li').eq(0).addClass('tab-active');
		$('#homeelec .brick-list ul').eq(0).addClass('tab-content-active');
	};
	
	
})
